<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tsinglog - 文章详情</title>
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/fonts/iconfont.css">
  <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/zzsc.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/dcalendar.picker.css">
  <link rel="stylesheet" href="/static/lib/wangEditor/css/wangEditor.min.css">
  <link rel="stylesheet" href="/static/css/common/base.css">
  <link rel="stylesheet" href="/static/css/common/layout.css">
  <link rel="stylesheet" href="/static/css/content/notice.css">
  <link rel="stylesheet" href="/static/css/content/modal.css">
  <link rel="stylesheet" href="/static/css/article.css">
</head>
<body>

<!--顶部-->
<div th:replace="layout/header :: header"></div>

<!--内容-->
<div class="content">
  <div class="content-in div-in">
    <div class="container">
      <div class="row">
        <!--内容左侧区域-->
        <div th:replace="layout/left :: left"></div>
        <!--内容中间区域-->
        <div class="col-md-7 col-md-offset-2 content-center">
          <!--公告-->
          <div th:replace="content/notice :: notice"></div>
          <!--文章详情-->
          <div class="article-detail-box">
            <!--标题-->
            <div class="box-title">
              <a href="javascript:;">
                文章详情<span> / Article Detail</span>
              </a>
              <div class="rich-editor-box editor-box" th:if="${article.editorType == 1}">
                <div class="box-header">
                  <div class="type" th:text="${article.type == 1}? '原创': '转载'"></div>
                  <div class="count-info">
                    <div>
                      <a href="javascript:;" th:text="'围观数 (' + ${article.browseCount} + ')'"></a>
                    </div>
                    <div>
                      <a href="#article_info" th:text="'评论数 (' + ${article.commentCount} + ')'"></a>
                    </div>
                  </div>
                </div>
                <div class="article-title" th:text="${article.title}"></div>
                <div class="article-time" th:text="'发表日期：' + ${article.releaseTime}"></div>
                <div class="cover-image"
                     th:style="'background: url(' + ${article.coverImage} + ') no-repeat center center;background-size: cover;'">
                </div>
                <div class="article-content" th:utext="${article.articleContent}">
                </div>
              </div>
              <div class="markdown-box editor-box" th:if="${article.editorType == 2}">
                <div class="box-header">
                  <div class="type" th:text="${article.type == 1}? '原创': '转载'"></div>
                  <div class="count-info">
                    <div>
                      <a href="javascript:;" th:text="'围观数 (' + ${article.browseCount} + ')'"></a>
                    </div>
                    <div>
                      <a href="#article_info" th:text="'评论数 (' + ${article.commentCount} + ')'"></a>
                    </div>
                  </div>
                </div>
                <div class="article-title" th:text="${article.title}"></div>
                <div class="article-time" th:text="'发表日期：' + ${article.releaseTime}"></div>
                <div class="cover-image"
                     th:style="'background: url(' + ${article.coverImage} + ') no-repeat center center;background-size: cover;'">
                </div>
                <div class="article-content"></div>
              </div>
              <!--正文结束分界线-->
              <div class="content-divider">
                <div class="divider-left"></div>
                <p>正文到此结束</p>
                <div class="divider-right"></div>
              </div>
              <!--对于文章的评价-->
              <div class="estimate-box">
                <div class="estimate-item prefer-box" onclick="preferThisArticle()">
                  <i class="iconfont icon-xihuan1"></i>
                  <p>感觉不错 (<b th:text="${article.preferCount}"></b>)</p>
                </div>
                <div class="estimate-item share-box" onclick="openModal('分享功能还在路上')">
                  <i class="iconfont icon-fenxiang"></i>
                  <p>分享这篇文章</p>
                </div>
              </div>
            </div>
          </div>
          <!--文章信息-->
          <div class="article-info" id="article_info">
            <div class="info-item">
              <span>文章分类</span>
              <div class="info-content">
                <a th:href="@{'/list?cid=' + ${article.categoryId}}" th:text="${article.categoryName}"></a>
              </div>
            </div>
            <div class="info-item">
              <span>文章标签</span>
              <div class="info-content">
                <a th:each="tag:${tagList}" th:href="@{'/list?tid=' + ${tag.id}}" th:text="${tag.tagName}"></a>
              </div>
            </div>
            <div class="info-item">
              <span>版权申明</span>
              <div class="info-content" th:if="${article.type eq 1}">
                本站原创文章，转载请注明出处！
              </div>
              <div class="info-content" th:if="${article.type eq 2}">
                本文为互联网转载文章，出处已在文章中说明(部分除外)。如有侵权，请
                <a class="mail-to" href="mailto:tsinglog@sina.com">联系</a>
                本站删除，谢谢。
              </div>
            </div>
            <div class="info-item">
              <span>上一篇文章</span>
              <div class="info-content">
                <a th:if="${preArticle.id ne 0}" th:href="@{${preArticle.link}}" th:text="${preArticle.title}"></a>
                <p style="margin-bottom: 0px" th:if="${preArticle.id eq 0}">已经是第一篇文章了</p>
              </div>
            </div>
            <div class="info-item">
              <span>下一篇文章</span>
              <div class="info-content">
                <a th:if="${nextArticle.id ne 0}" th:href="@{${nextArticle.link}}" th:text="${nextArticle.title}"></a>
                <p style="margin-bottom: 0px" th:if="${nextArticle.id eq 0}">已经是最后一篇文章了</p>
              </div>
            </div>
          </div>

          <!--评论信息-->
          <div class="comment-box" th:if="${article.canComment == 1}">
            <!--评论列表-->
            <ul class="comment-list clearfix" th:if="${commentPage eq null}" th:fragment="list_refresh">
              <div class="no-comment-box">
                评论加载中...
              </div>
            </ul>
            <ul class="comment-list clearfix" th:if="${commentPage ne null && #lists.size(commentPage.data) eq 0}"
                th:fragment="list_refresh">
              <div class="no-comment-box">
                沙发还在哦~~~
              </div>
            </ul>
            <ul class="comment-list clearfix" th:if="${commentPage ne null && #lists.size(commentPage.data) ne 0}"
                th:fragment="list_refresh">
              <li class="comment-item clearfix" th:each="comment:${commentPage.data}" th:cid="${comment.id}">
                <div class="item-top">
                  <img
                    th:src="@{'http://www.tsinglog.online/static/images/avatar/' + ${comment.authorPhoto}}"
                    class="img-circle"/>
                  <div class="info">
                    <div class="name">
                      <i class="iconfont icon-tubiao211"></i>
                      <span th:text="${comment.authorName}"></span>
                    </div>
                    <div class="time">
                      <i class="iconfont icon-shijian"></i>
                      <span th:text="${comment.createTime}"></span>
                      <i class="iconfont icon-weizhi" style="display: inline-block; margin-left: 20px; color: #ccc"></i>
                      <span style="color: #ccc" th:text="${comment.location}"></span>
                    </div>
                  </div>
                </div>
                <div class="item-middle">
                  <div class="quote" th:if="${comment.preCommentId ne null}">
                    <blockquote th:if="${comment.preStatus == 1}">
                      <p th:text="'引用' + ${comment.preFloor} + '楼' + ${comment.preAuthorName}
                          + '于' + ${comment.preCreateTime} + '发表的:'"></p>
                      <p th:utext="${comment.preComment}"></p>
                    </blockquote>
                    <blockquote th:if="${comment.preStatus == 0}">
                      <p>该评论已经被删除</p>
                    </blockquote>
                  </div>
                  <div class="reply">
                    <p th:utext="${comment.commentContent}"></p>
                  </div>
                </div>
                <ul class="viewpoint">
                  <li>
                    <i class="iconfont icon-zhichi"></i>
                    <a href="javascript:;" onclick="supportComment(this)">支持(<b th:text="${comment.supportCount}"></b>)
                    </a>
                  </li>
                  <li>
                    <i class="iconfont icon-fandui"></i>
                    <a href="javascript:;" onclick="opposeComment(this)">反对(<b th:text="${comment.opposeCount}"></b>)
                    </a>
                  </li>
                  <li>
                    <i class="iconfont icon-huifu"></i>
                    <a href="javascript:;" onclick="replyComment(this)">回复</a>
                  </li>
                </ul>
                <span th:name="${comment.floor}" class="floor-num" th:text="${comment.floor} + '#'"></span>
                <span class="admin-common-tag root-tag" th:if="${comment.roleName == '超级管理员'}">超管</span>
                <span class="admin-common-tag admin-tag" th:if="${comment.roleName == '普通管理员'}">普管</span>
              </li>
              <!--分页-->
              <nav aria-label="Page navigation" class="fr" th:if="${commentPage.pageInfo.pages gt 1}">
                <ul class="pagination">
                  <li th:class="${commentPage.pageInfo.pageNum lt 4}? 'disabled': ''">
                    <a href="javascript:;"
                       title="首页"
                       class="iconfont icon-icon_paging_left"></a>
                  </li>
                  <li th:class="${commentPage.pageInfo.isFirstPage}? 'disabled': ''">
                    <a href="javascript:;"
                       title="上一页"
                       class="iconfont icon-fenye1"></a>
                  </li>
                  <li th:each="num:${commentPage.pageInfo.navigatepageNums}"
                      th:class="${commentPage.pageInfo.pageNum == num}? 'active': ''">
                    <a href="javascript:;" th:text="${num}" th:onclick="'getCommentByAid('+${num}+')'"></a>
                  </li>
                  <li th:class="${commentPage.pageInfo.isLastPage}? 'disabled': ''">
                    <a href="javascript:;"
                       title="下一页"
                       class="iconfont icon-fenye"></a>
                  </li>
                  <li th:class="${commentPage.pageInfo.pageNum gt commentPage.pageInfo.pages - 3}? 'disabled': ''">
                    <a href="javascript:;"
                       title="尾页"
                       class="iconfont icon-icon_paging_right"></a>
                  </li>
                </ul>
              </nav>
            </ul>

            <div class="info-input">
              <div class="form-group">
                <label for="name">昵称</label>
                <input type="text" class="form-control input-sm" id="name" placeholder="将输入昵称" maxlength="10">
                <p class="must-mark">*</p>
              </div>
              <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control input-sm" id="email" placeholder="请输入邮箱">
                <p class="must-mark">*</p>
              </div>
            </div>
            <!--评论编辑框-->
            <div class="comment-editor">
              <div id="editor" class="editor"></div>
            </div>
            <button onclick="submitComment()">提交评论</button>
          </div>
          <div class="comment-box" th:if="${article.canComment == 0}">
            <div class="forbidComment-box">
              <i class="iconfont icon-tixing"></i>
              管理员已经关闭本文章的评论功能
            </div>
          </div>
        </div>
        <!--内容右侧区域-->
        <div th:replace="layout/right :: right"></div>
      </div>
    </div>

  </div>
</div>
<!--底部-->
<div th:replace="layout/footer :: footer"></div>
<!--提示框-->
<div th:replace="content/modal :: modal"></div>

<script src="../static/lib/jquery/jquery.js"></script>
<script src="../static/lib/bootstrap/js/bootstrap.js"></script>
<script src="../static/lib/DCalendar/js/dcalendar.picker.js"></script>
<script src="../static/lib/wangEditor/js/wangEditor.js"></script>
<script src="../static/lib/showdown/showdown.min.js"></script>
<script src="../static/js/layout.js"></script>
<script src="../static/js/notice.js"></script>
<script src="../static/js/modal.js"></script>

<script th:inline="javascript">

  let editor = null;

  // 从url中获取当前文章的aid
  let href = window.location.href;
  let indexForLastHash = href.lastIndexOf("/");
  let indexForQuestionMark = href.lastIndexOf("?");
  let aid;
  if (indexForQuestionMark == -1) {
    aid = href.substring(indexForLastHash + 1);
    if (aid.indexOf("#") > -1) {
      aid = aid.substring(0, aid.indexOf("#"));
    }
  } else {
    aid = href.substring(indexForLastHash + 1, indexForQuestionMark);
  }

  // 当前页面
  let currentPage = 0;

  $(function () {
    // 初始化评论框
    initEditor();
    // 初始化markdown显示框
    initMarkdown();
    // 获取第一页的评论
    window.setTimeout(() => {
      getCommentByAid(1);
    }, 1000);
  });


  /**
   * 初始化评论框
   */
  function initEditor() {

    let canComment = [[${article.canComment}]];
    if (canComment == 0) {
      return;
    }

    editor = new wangEditor('editor');

    editor.config.menus = [
      'source',
      '|',
      'bold',
      'underline',
      'italic',
      'strikethrough',
      'forecolor',
      '|',
      // 'quote',
      'link',
      // 'emotion',
      '|',
      'img',
      'insertcode',
    ];

    editor.create();
  }

  /**
   * 初始化markdown
   */
  function initMarkdown() {
    let editorType = [[${article.editorType}]];
    if (editorType == 1) {
      return;
    }
    let content = [[${article.articleContent}]];
    // 创建实例
    let converter = new showdown.Converter({tables: true});

    // 进行转换
    let result = converter.makeHtml(content);

    // 将内容显示到指定的地方
    $(".markdown-box .article-content").html(result);

  }

  /**
   * 回复评论
   */
  function replyComment(ele) {

    // 跳转到回复编辑框的区域
    $(window).scrollTop($('#editor').offset().top)

    let $li = $(ele).closest(".comment-item");
    // 获取该楼层的楼层号
    let floorNum = parseInt($li.find(".floor-num").text());
    // 获取该楼层的作者
    let author = $li.find(".name span").text();
    // 获取该楼层的评论
    let content = $li.find(".reply p").text();
    editor.$txt.html(`
      <blockquote>
        <p>引用${floorNum}楼${author}的回复</p>
        <p>${content}</p>
      </blockquote>
      <p><br/></p>`);
  }

  /**
   * 根据文章id获取评论数据
   * @param page 页码
   */
  function getCommentByAid(page) {

    // 点击的页面和当前页面一致时，不进行任何操作
    if (currentPage == page) {
      return;
    }
    currentPage = page;
    $(".comment-list").load("/portal/getCommentForPortal?page=" + page + "&aid=" + aid);
    setFitHeightForHtml();

  }

  /**
   * 支持评论
   * @param ele
   */
  function supportComment(ele) {
    // 获取评论id
    let commentId = $(ele).closest('.comment-item').attr("cid");
    $.get("/portal/supportComment?cid=" + commentId + "&aid=" + aid).success(res => {
      console.log(res);
      if (res.code == 1) {
        // 赋新值
        $(ele).find("b").text(res.data);
      } else {
        openModal(res.message);
      }
    })
  }

  /**
   * 反对评论
   * @param ele
   */
  function opposeComment(ele) {
    // 获取评论id
    let commentId = $(ele).closest('.comment-item').attr("cid");
    $.get("/portal/opposeComment?cid=" + commentId + "&aid=" + aid).success(res => {
      if (res.code == 1) {
        // 赋新值
        $(ele).find("b").text(res.data);
      } else {
        openModal(res.message);
      }
    })
  }

  /**
   * 喜欢这篇文章
   */
  function preferThisArticle() {
    $.get("/portal/preferThisArticle?aid=" + aid).success(res => {
      if (res.code == 1) {
        // 1.替换图标
        $(".estimate-box .estimate-item i").eq(0).removeClass("icon-xihuan1").addClass("icon-xihuan").css("color", "red");
        // 2.赋新值
        $(".estimate-box .estimate-item").find("p b").text(res.data);
      } else {
        openModal(res.message);
      }
    })
  }

  /**
   * 提交评论
   */
  function submitComment() {
    // 1.获取数据
    let name = $(".info-input").find("input[type=text]").val();
    let email = $(".info-input").find("input[type=email]").val();
    let content = editor.$txt.html();

    // 2.校验信息
    if (name == null || name == '') {
      openModal("昵称不能为空！");
      return false;
    }
    if (name.indexOf("root") != -1 || name.indexOf("admin") != -1 || name.indexOf("管理员") != -1) {
      openModal("昵称中包含敏感词汇，请修改后再提交");
      return false;
    }
    if (email == null || email == '') {
      openModal("邮箱不能为空");
      return false;
    }
    let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if (!pattern.test(email)) {
      openModal("邮箱格式有误");
      return false;
    }

    // 3.如果有引用的信息就获取引用中的楼层信息preFloor
    let indexForBlockquote = content.indexOf("</blockquote>");
    let preFloor = null;
    if (indexForBlockquote != -1) {
      let blockquote = content.substring(0, indexForBlockquote + 1 + 13);
      preFloor = blockquote.substring(blockquote.indexOf("引用") + 2, blockquote.indexOf("楼"));
    }
    content = preFloor ? content.substring(indexForBlockquote + 13) : content;

    if (content == null || $.trim(content) == '' || $.trim(content) == '<p><br></p>') {
      openModal("评论内容不能为空");
      return false;
    }

    if (content.length >= 500) {
      openModal("评论长度过长，请删减后再提交");
      return false;
    }

    let data = {
      name: name,
      email: email,
      content: content,
      aid: aid,
      preFloor: preFloor
    }

    // 4.发送请求
    $.ajax({
      url: '/portal/submitComment',
      type: 'post',
      data: JSON.stringify(data),
      contentType: 'application/json;charset=UTF-8',
      success(res) {
        if (res.code == 1) {
          openModal("评论成功，请等待审核");
          // 清空输入框的内容
          editor.$txt.html('<p><br></p>');
          $(".info-input").find("input[type=text]").val("");
          $(".info-input").find("input[type=email]").val("");
        } else {
          openModal(res.message);
        }
      }
    });
  }
  </script>
</body>
</html>